<template>
<!--  <bpmn-toolbar v-if="getEditorConfig.toolbar" @save="save" />-->
  <div class="main-content">
<!--    <bpmn-designer :xml.sync="xmlString" />-->
<!--    <bpmn-panel v-if="getEditorConfig.penalMode === 'custom'" />-->
<!--    <div v-else class="camunda-panel" id="camunda-panel"></div>-->
  </div>

<!--  <bpmn-settings />-->
<!--  <bpmn-context-menu />-->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getBpmModel, updateBpmModel } from "@/api/flowable/bpmModel";
import { getModeler } from "@/components/BpmnProcessDesigner/packages/bpmn-utils/BpmnDesignerUtils";
import BpmnDesigner from "@/components/BpmnProcessDesigner/packages/components/Designer/index.vue";
// import BpmnSettings from "@/components/BpmnProcessDesigner/packages/components/Settings/index.vue";
// import BpmnToolbar from "@/components/BpmnProcessDesigner/packages/components/Toolbar/index.vue";
// import BpmnContextMenu from "@/components/BpmnProcessDesigner/packages/components/ContextMenu/ContextMenu.vue";
// import BpmnPanel from "@/components/BpmnProcessDesigner/packages/components/Panel/index.vue";
import  useBpmnStore  from "@/components/BpmnProcessDesigner/packages/store/index";


const xmlString = ref(undefined);
const form = ref({
  modelId: undefined,
  modelName: undefined,
  modelKey: undefined,
  bpmnXml: undefined
});
const store = useBpmnStore();
const getEditorConfig = store.getEditorConfig;

onMounted(() => {
  document.body.addEventListener("contextmenu", function (ev) {
    ev.preventDefault();
  });
  getBpmModel(this.$route.query.id).then((res)=>{
    form.value = res.data;
    getModeler() && getModeler().importXML(res.data.bpmnXml);
    // console.log(xmlString.value)
  })
});

const save = (xml) => {
  this.$confirm('是否确认修改流程模型?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    form.value.bpmnXml = xml;
    updateBpmModel(form.value).then(()=>{
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path:'/bpm/bpmModel'
      })
    })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
};
</script>

<style scoped>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
